<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>ChatChatCat後台</title>

<link rel="stylesheet" href="css/newspaper/jquery-ui-1.10.4.custom.css">
	
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>

<style>
body {
	padding: 0;
	margin: 0;
	background-image:url('images/index_background.jpg'); 
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center center; 
	background-attachment: fixed;
	overflow: hidden;
}

.logoblock {
	position: relative;
	top: 200px;
	left: 0px;
}

.logotextclass {
	text-shadow: 5px 5px 15px black;
	padding-bottom: 10px;
	padding-right: 10px;
	color: #fff4dd;
	font-family: '微軟正黑體';
	font-weight: 700;
	text-decoration: none;
	font-size: 48px;
	z-index: 1;
	position: absolute;
	top: 7px;
	left: -63px;
	opacity: 0;
	filter: alpha(opacity =    0);
	-webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow:hidden;
}

.logotextclass2 {
	text-shadow: 5px 5px 15px black;
	padding-bottom: 10px;
	padding-right: 10px;
	color: #ffdc6a;
	font-family: '微軟正黑體';
	font-weight: 700;
	text-decoration: none;
	font-size: 48px;
	z-index: 1;
	position: absolute;
	top: 7px;
	left: -63px;
	opacity: 1;
	filter: alpha(opacity =    100);
	
	-webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

.logoclass {
	position: absolute;
	top: -90px;
	left: -65px;
	z-index: 1;
	opacity: 1;
	filter: alpha(opacity =    100);
	-webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow:hidden;
    width: 491px;
    height: 204px;
}

.logoclass2 {
	position: absolute;
	top: -90px;
	left: -65px;
	z-index: 1;
	opacity: 0;
	filter: alpha(opacity =    0);
	
	-webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

label {
	display: inline-block;
	width: 5em;
	line-height: 24px; 
	font-size: 18px; 
	font-family: '微軟正黑體';
}

input.text {
	margin-bottom: 12px;
	width: 210px;
	padding: .4em;
	font-size: 14px;
	font-family: '微軟正黑體';
}

.labeltext {
	color:black; 
	font-weight: bold;
	text-shadow: 0px 0px 8px white; 
	font-family: '微軟正黑體';
}

.buttonClass, .buttonClass:VISITED {
	color:white; 
	text-shadow: 0px 0px 8px black; 
	font-family: '微軟正黑體';
	text-decoration: none;
}
</style>

<script>
	$(function() {
			$("#logo").hover(function() {
			$(".logotextclass").toggleClass("logotextclass2", {duration: 300}).clearQueue();
			$("#logoid").toggleClass("logoclass2", {duration: 300}).clearQueue();
		//	$("#logoid-hover").toggleClass("logoclass2", {duration: 300}).clearQueue();
		});

	});
	
</script>

</head>


<body>

<div style="display: block; position:relative; left:20%; top:20%;">

			<div id="logo" class="logoblock"><span class="logotextclass">全球第一貓咪社群網站</span> 
			<img src="images/logo_large2.png" id="logoid" class="logoclass"> 
	<!-- 	<img src="images/logo-hover.png" id="logoid-hover" class="logoclass" style="position: absolute; top: -10px; left: -40px; z-index: -1;">  -->	
			</div>
			<img src="images/indexintro.png" style="position: absolute; top: 160px; left: 390px">
			<!-- 	<img src="images/indexintro_small.png" style="position: absolute; top: 120px; left: 305px">  -->
		
		<div style="display:block; position:absolute; top:330px; left:25px">
		<p>
			<label for="username" class="labeltext">管理帳號</label><input id="username" type="text"
				name="username" placeholder="請輸入帳號"
				class="text ui-widget-content ui-corner-all">
		</p>
		<p style="position: relative;"><label for="password" class="labeltext">管理密碼</label><input id="password"
			type="password" name="pwd"
			placeholder="請輸入密碼"
			class="text ui-widget-content ui-corner-all">
		</p>
		<p style="margin-top:25px;">
		<a href="pages/ManagerHomePage.html" id="loginid" class="buttonClass" style="position:absolute; left: 90px; font-size:24px;">登入</a>
		</p>
		</div>
		
</div>
	
</body>

</html>
